<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

<!DOCTYPE html>

<html>
<head>
	<meta charset="utf-8" />
	<title>회원등록</title>
	<link rel="Stylesheet" href="/libweb/styles/default.css" />
	<link rel="Stylesheet" href="/libweb/styles/input.css" />
	<script type="text/javascript">
		function checkAndSubmit() {
			var message = "";
			
			var memberId = document.getElementById("memberId");
			if (memberId.value.length == 0) {
				message += "아이디를 입력하세요.\r\n";
			}
			var re = /^[0-9A-Za-z]{5,20}$/;
			if(!re.test(memberId.value)) {
				message += "아이디 형식 오류 (영문자, 숫자 조합 5 ~ 20개)\r\n";
			}
			
			var passwd = document.getElementById("passwd");
			if (passwd.value.length == 0) {
				message += "비밀번호를 입력하세요.\r\n";
			}
			
			var confirm = document.getElementById("confirm");
			if (confirm.value != passwd.value) {
				message += "비밀번호 불일치.\r\n";
			}
			
			var name = document.getElementById("name");
			if (name.value.length == 0) {
				message += "이름을 입력하세요.\r\n";
			}
			
			var address = document.getElementById("address");
			if (address.value.length == 0) {
				message += "주소를 입력하세요.\r\n";
			}
			
			var phoneno = document.getElementById("phoneno");
			if (phoneno.value.length == 0) {
				message += "전화번호를 입력하세요.\r\n";
			}
			var re2 = /^[0-9]{10,11}$/;
			if(!re2.test(phoneno.value)) {
				message += "전화번호 형식 오류 (숫자만 10~11)";
			}			
			
			if (message.length > 0) {
				alert(message);
			} else {
				document.getElementById("registerform").submit();
			}
		}
	</script>
</head>
<body>

	<div id="pageContainer">
	
		<% pageContext.include("/WEB-INF/views/include/header.jsp"); %>
		
		<div id="inputcontent">
			<br /><br />
		    <div id="inputmain">
		        <div class="inputsubtitle">회원기본정보</div>

		        <form id="registerform" action="register.action" method="post"><!-- 상대경로표시 -->
			        <table>
			            <tr>
			                <th>아이디(ID)</th>
			                <td>
			                    <input type="text" id="memberId" name="memberId" style="width:280px" />
			                </td>
			            </tr>
			            <tr>
			                <th>비밀번호</th>
			                <td>
			                	<input type="password" id="passwd" name="passwd" style="width:280px" />
			                </td>
			            </tr>
			            <tr>
			                <th>비밀번호 확인</th>
			                <td>
			                    <input type="password" id="confirm" name="confirm" style="width:280px" />
			                </td>
			            </tr>
			            <tr>
			                <th>이름</th>
			                <td>
			                	<input type="text" id="name" name="name" style="width:280px" />
			                </td>
			            </tr>
			            <tr>
			                <th>주소</th>
			                <td>
			                	<input type="text" id="address" name="address" style="width:280px" />
			                </td>
			            </tr>
			            <tr>
			                <th>전화번호(번호만)</th>
			                <td>
			                	<input type="text" id="phoneno" name="phoneno" style="width:280px" />
			                </td>
			            </tr>
			            <tr>
			                <th>등록일자</th>
			                <td>
			                	
			                </td>
			            </tr>		            		            
			        </table>
			        <div class="buttons">
			        	<input type="button" value="가입" style="height:25px" onclick="checkAndSubmit();" />
			        	<input type="button" value="취소" style="height:25px"
			        		onclick="location.href='list.action';" />
			        </div>
		        </form>
		    </div>
		</div>	
	</div>
</body>
</html>